{% extends 'index.html' %}

{% block style_content %}
    <style>
        #chart2{
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease-in-out;
        }

        #chart2:hover {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
        }

        #chart1{
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease-in-out;
        }

        #chart1:hover {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
        }

        #chart3{
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease-in-out;
        }

        #chart3:hover {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
        }
    </style>
{% endblock %}


{% block content %}
    <div class="wrapper">
        <div class="container-fluid"><!-- Page-Title -->

            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right hide-phone">
                            <a href="{% url 'train:download' %}" class="btn btn-outline-secondary btn-round waves-effect">
                            <i class="mdi mdi-cloud-download mr-2"></i>
                            下载已训练模型
                            </a>
                        </div>
                        <div class="btn-group mt-2">
                            <h4 class="page-title">可视化训练结果</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title" style="font-size: 18px">损失变化曲线</h4>
                            <div id="chart1" style="width: 100%; height: 400px; position: relative;"></div>
                        </div>
                    </div>
                </div><!-- end col -->
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title" style="font-size: 18px">训练集F1分数变化</h4>
                            <div id="chart2" style="width: 100%; height: 400px; position: relative;"></div>
                        </div>
                    </div>
                </div><!-- end col -->
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title" style="font-size: 18px">训练样本标签分布</h4>

                            <div id="chart3" style="width: 100%; height: 400px; position: relative;">

                            </div>
                        </div>
                    </div>
                </div><!-- end col -->
            </div>


        </div><!-- end container -->
    </div>
{% endblock %}

{% block script_content %}
    <script src="/static/js/chart.min.js"></script>
    <script src="/static/js/console-ban.min.js"></script>
    <!-- 引入ECharts -->
    <script src="/static/js/echarts.min.js"></script>

    <script>
        var myChart1 = echarts.init(document.getElementById('chart1'));
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var myChart3 = echarts.init(document.getElementById('chart3'));
        // 指定图表的配置项和数据
        var data = [
          {% for key,value in pie_data.items %}
            {name: '类别{{ key }}', value: {{ value }}},
          {% endfor %}
        ];
        var option1 = {
          xAxis: {
            name: '轮次',
            data: {{ epochs|safe }}
          },
          yAxis: {
            name: '损失'
          },
          series: [
            {
              name: '训练损失',
              type: 'line',
              data: {{ train_losses|safe }},
              label: {
                show: true,
                formatter: '{c}'
              }
            },
            {
              name: '验证损失',
              type: 'line',
              data: {{ val_losses|safe }},
              label: {
                show: true,
                formatter: '{c}'
              }
            }
          ]
        };
        var option2 = {
          xAxis: {
            name: '轮次',
            data: {{ epochs|safe }}
          },
          yAxis: {
            name: '损失'
          },
          series: [
            {
              name: '训练损失',
              type: 'line',
              data: {{ scores|safe }},
              label: {
                show: true,
                formatter: '{c}'
              }
            },
          ]
        };
        var option3 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '类别',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);

        $('#loading').hide();
    </script>
{% endblock %}
